<template>
	<view class="ball-team-detail-page">
		<view class="top-area">
			<img class="top-logo" :src="img" alt="">
			<view class="top-r">
				<view style="margin-bottom: 18px;font-weight: 600;">{{formData.teamName}}</view>
				<view class="top-r-info">主教练：{{formData.instructorZ}}</view>
				<view class="top-r-info">领队：{{formData.responsibleName}}</view>
			</view>
		</view>
		<view style="margin-top: 20px;padding: 0 10px;">
			<view style="font-size: 32rpx;font-weight: 600;">{{formData.teamName}}</view>
			<view style="margin-top: 10px;font-size: 24rpx;color:#969a9b;line-height: 24px;"
				v-if="ballTeamInfo.length > 0">
				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="ballTeamInfo" :current="current"
					:mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay circular>
						<swiper-item v-for="(item, index) in ballTeamInfo" :key="index">
							<view v-if="item.typ == 1">
								<view style="font-size: 26rpx;color:#333;font-weight: 600;">{{item.tit}}</view>
								<view style="color:#333;">{{item.content}}</view>
							</view>
							<img v-if="item.typ == 2" style="width: 100%;height: 216px" :src="item.content" alt="">
							<view v-if="item.typ == 3">
								<view class="ry-sty">{{item.tit}}</view>
								<view class="ry-sty">{{item.content}}</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
		<view v-if="userInfo.userType == 2 && userInfo.ballTeamNm == ballTeamId" class="reg-btn-area" @click="toPlayRegPage">
			<!-- playersList.length <= playNmu && 人数可超24年1月11日下午15：30:微信去除-->
			<view class="btn-sty">球员注册</view>
		</view>
		<view style="padding: 0 10px 50px;">
			<view class="ball-play-info">
				<view>球员信息</view>
				<view style="text-align: right;">球员人数：{{playersList.length}} 人</view>
				<!-- /{{playNmu}} 现在不需要控制人数，人数可超24年1月11日下午15：30:微信去除-->
			</view>
			<view class="play-table-area" style="padding: 12px 0;">
				<view v-for="(item,index) in playTableTitle" :key="index">{{item.title}}</view>
			</view>
			<view class="play-table-area" v-for="play in playersList" :key="play._id">
				<view style="text-align: left;">
					<img style="width: 45px;height: 45px;vertical-align: middle;" :src="play.imgUrl" alt="">
					<view style="display: inline-block;margin-left: 10rpx;">{{play.userNm}}</view>
				</view>
				<view>{{play.jerseyNum}}</view>
				<view>{{play.height}}</view>
				<view>{{play.weight}}</view>
				<view v-if="userInfo.userType == 2 && userInfo.ballTeamNm == ballTeamId">
					<text  class="cz-btn" @click="removePlayer(play)">x</text>
				</view>
			</view>
		</view>
		<view style="position: relative;" v-if="btnFla">
			<!-- playersList.length <= playNmu && 人数可超24年1月11日下午15：30:微信去除-->
			<button data-name="shareBtn" open-type="share" class="share">球员注册分享</button>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				formData: {},
				img: '',
				userInfo: {},
				playersList: [],
				ballTeamInfo: [],
				playTableTitle: [
					{
						title: '球员'
					},
					{
						title: '球衣号'
					},
					{
						title: '身高cm'
					},
					{
						title: '体重kg'
					}
				],
				playTableTitle2: [
					{
						title: '球员'
					},
					{
						title: '球衣号'
					},
					{
						title: '身高cm'
					},
					{
						title: '体重kg'
					},
					{
						title: '操作'
					}
				],
				ballTeamId: '',
				btnFla: false,
				current: 0,
				mode: 'default',
				dotsStyles: {
					backgroundColor: '#fce9b1',
					border: '1px #fce9b1 solid',
					color: '#fff',
					selectedBackgroundColor: '#f9b76d',
					selectedBorder: '1px #f9b76d solid'
				},
				swiperDotIndex: 0,
				playNmu: 15
			}
		},
		onLoad(op) {
			this.ballTeamId = op.id
		},
		created() {},
		mounted() {},
		onShow(op) {
			const _this = this
			this.getDetail(this.ballTeamId)
			this.getPlayersList(this.ballTeamId)
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log(res.data)
					if (res.data) {
						_this.userInfo = res.data
						if ((_this.userInfo.userType == 1 || _this.userInfo.userType == 2) && res.data
							.ballTeamNm == _this.ballTeamId) {
							_this.btnFla = true
						} else {
							_this.btnFla = false
						}
						if (_this.userInfo.userType == 2 && res.data.ballTeamNm == _this.ballTeamId) {
							_this.playTableTitle = [..._this.playTableTitle2]
						}
					}
				}
			})
		},
		methods: {
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection('team-MGMT').doc(id).field(
					"teamName,responsibleName,instructorF,instructorFP,instructorZ,logo,honor,deleted_at,state,type,ballTeamIntroduce,ballTeamPhoto,openTime,delNum"
				).get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						const file = data.logo.split(',')
						let honor = null
						let arr = []
						this.playNmu = data.type == 0 ? 18:15
						this.img = `${this.$baseImgUrl}${file[0]}`
						if (data.honor) {
							honor = JSON.parse(data.honor)
						}
						if (data.ballTeamIntroduce) {
							arr.push({typ: '1', tit: '球队简介：', content: data.ballTeamIntroduce})
						}
						if (data.ballTeamPhoto) {
							const f = data.ballTeamPhoto.split(',')
							arr.push({typ: '2', tit: '', content: `${this.$baseImgUrl}${f[0]}`})
						}
						if (honor) {
							honor.map(item => {
								arr.push({
									typ: '3',
									tit: '球队荣誉',
									content: item.content
								})
							})
						}
						this.ballTeamInfo = arr
						this.opinionList = data.opinion ? JSON.parse(data.opinion) : []
						data.opinion = ''
						this.formData = data
						if (data.openTime < new Date().getTime()) {
							const op = data.openTime + (60*60*24*365*1000)
							db.collection('team-MGMT').doc(id).update({openTime:op})
								.then((res) => {})
								.catch((err) => {
									uni.showModal({
										content: err.message || '请求服务失败',
										showCancel: false
									})
								}).finally(() => {})
						}
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			getPlayersList(id) {
				const where = `"deleted_at"==null&&"ballTeamNm"=="${id}"`
				db.collection('user-MGMT').where(where).field(
					"userNm,jerseyNum,height,weight,portrait,ballTeamNm,deleted_at"
				).get().then((res) => {
					const data = res.result.data
					if (data) {
						const arr = []
						res.result.data.map(item => {
							const file = item.portrait.split(',')
							item.imgUrl = `${this.$baseImgUrl}${file[0]}`
							arr.push(item)
						})
						this.playersList = arr
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {})
			},
			removePlayer(item) {
				// 2024年1月25日下午15：:35微信沟通取消删除的控制，因为球员都需要审批。
				// if (this.formData.delNum >= 2) {
				// 	uni.showModal({
				// 		content: '本年度人员调整名额已用完',
				// 		showCancel: false,
				// 	})
				// 	return
				// }
				const _this = this
				const parm = {
					ballTeamNm: "",
					ballTeamType: null,
					userType: '0'
				}
				if (item._id == this.userInfo._id) {
					uni.showModal({
						content: '无法删除自己',
						showCancel: false,
					})
					return
				}
				uni.showModal({
					content: '删除后无法恢复！确认删除？',
					success: function(res) {
						if (res.confirm) {
							return db.collection('user-MGMT').doc(item._id).update(parm)
								.then((res) => {
									uni.showToast({
										icon: 'none',
										title: '移出成功'
									})
									let op
									if (_this.formData.delNum + 1 == 2) {
										// op = _this.formData.openTime + (60 * 60 * 24 * 365 * 1000) // 1年
										op = _this.formData.openTime + (60 * 60 * 24 * 1000) // 测试用1天
									}
									const obj = {
										delNum: _this.formData.delNum + 1,
										openTime: op
									}
									db.collection('team-MGMT').doc(_this.ballTeamId).update(obj)
										.then((res) => {
											_this.getDetail(_this.ballTeamId)
											_this.getPlayersList(_this.ballTeamId)
										})
										.catch((err) => {
											uni.showModal({
												content: err.message || '请求服务失败',
												showCancel: false
											})
										}).finally(() => {})
								}).catch((err) => {
									uni.showModal({
										content: err.message || '请求服务失败',
										showCancel: false
									})
								})
						}
					}
				})
			},
			toPlayRegPage() {
				const obj = {
					id: this.ballTeamId,
					nm: this.formData.teamName,
					typ: this.formData.type,
					rpbNm: this.formData.instructorF // 修改成管理员字段
				}
				uni.navigateTo({
					url: `../register/playRegister?parm=${JSON.stringify(obj)}`
				});
			},
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {

		},
		/**
		 * 用户点击右上角分享好友
		 */
		onShareAppMessage: function() {
			const obj = {
				id: this.ballTeamId,
				nm: this.formData.teamName,
				typ: this.formData.type,
				rpbNm: this.formData.instructorF, // 修改成管理员字段
				fx: this.formData.type // 分享标识1，
			}
			return {
				// path: `pages/sp-obj/register/playRegister?parm=${JSON.stringify(obj)}`,
				path: `pages/sp-obj/register/ballTeamSelect?parm=${JSON.stringify(obj)}`,
				title: `${obj.nm}球员注册`,
			}
		},
		/**
		 * 用户点击右上角分享朋友圈
		 */
		onShareTimeline: function() {
			const obj = {
				id: this.ballTeamId,
				nm: this.formData.teamName,
				typ: this.formData.type,
				rpbNm: this.formData.instructorF, // 修改成管理员字段
				fx:this.formData.type
			}
			return {
				path: 'pages/sp-obj/register/ballTeamSelect',	// 'pages/sp-obj/register/playRegister',
				query: `parm=${JSON.stringify(obj)}`,
				title: `${obj.nm}球员注册`,
			}
		}
	}
</script>

<style>
	.ball-team-detail-page {}

	.top-area {
		width: 100%;
		height: 180px;
		background: linear-gradient(to bottom, #ffb625, #f9671a);
		position: relative;
	}

	.top-logo {
		width: 110px;
		height: 110px;
		position: absolute;
		top: 40px;
		left: 50px;
	}

	.top-r {
		/* width: 280rpx; */
		position: absolute;
		top: 40px;
		left: 180px;
		color: #fff;
	}

	.top-r view {
		margin-bottom: 10px;
	}

	.top-r-info {
		font-size: 28rpx;
	}

	.play-table-area {
		display: flex;
		align-items: center;
		text-align: center;
		margin: 12px 0;
	}

	.play-table-area view {
		flex: 1;
	}

	.play-table-area view:first-child {
		flex: 2;
	}

	.cz-btn {
		width: 28px;
		height: 28px;
		border-radius: 15px;
		background: #ccc;
		line-height: 26px;
		display: inline-block;
		color: #fff;
	}

	.ball-play-info {
		padding: 12px 0;
		border-bottom: 1px solid #ccc;
	}

	.ball-play-info view {
		width: 50%;
		display: inline-block;
	}

	.reg-btn-area {
		/* margin: 20px 0; */
		text-align: right;
		position: relative;
	}

	.btn-sty {
		display: inline-block;
		height: 38px;
		color: #fc993b;
		line-height: 38px;
		font-size: 30rpx;
		font-weight: 500;
		margin-right: 10px;
	}

	.share {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		height: 38px;
		line-height: 38px;
		width: 50%;
		background: #fc993b;
		color: #fff;
	}
	.ry-sty {
		margin: 10px;text-align: center;font-size: 32rpx;font-weight: 600;color:#333
	}
</style>
<style lang="scss">
	.swiper-box {
		height: 216px;
	}
</style>